<template>
  <view class="filter-item">
    <text class="font-item-text">{{ title }}</text>
    <picker mode="selector" :range="workArea" @change="changePicker" @cancel="cancellation">
      <view class="uni-input">
        <text class="range-text">{{ value }}</text>
        <uni-icons type="arrowright" size="20" class="icon"></uni-icons>
      </view>
    </picker>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

//取消之后的回调函数，并进行提醒用户点击了取消
const cancellation = (e: Event): void => {
  uni.showToast({
    title: '您点击了取消',
    icon: 'error',
  })
}

defineProps({
  //title 选择的标题 类型为字符串 默认样式为内容展示 例如：工作区域
  title: {
    type: String,
    default: '内容展示',
  },
  //workArea 选择内容的列表 类型为字符串数组 必填 例如：['内容1', '内容2', '内容3', '内容4']
  workArea: {
    type: Array,
    // default: ['message1', 'message2', 'message3', 'message4', 'message5', 'message6'],
    required: true,
  },
  //value 选择的内容 类型为字符串 必填 例如：'内容1'
  value: {
    type: String,
    default: '',
    required: true,
  },
  //changePicker 选择之后的回调函数 类型为函数 必填
  changePicker: {
    type: Function,
    required: true,
  },
})
</script>

<style lang="scss" scoped>
.filter-item {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  margin-bottom: 20px;
}

.font-item-text {
  color: #6e7073;
  font-size: 3vw;
}

.uni-input {
  display: flex;
  align-items: center;
}

.icon {
  color: #ccc;
  margin-left: 1vw;
}
</style>
